<template>
  <div>
    <!-- 
        git init 
        touch README.md
        git add README.md
        git commit -m "first commit"
        git remote add origin https://gitee.com/xgatguigu/sh220718-srb-admin.git
        git push -u origin "master"
        el-upload:
          attribute：使用:绑定
            action: 上传地址 必须提供
            limit： 上传组件限制一次上传文件的数量
            name：上传组件 表单项name属性值 默认file
            on-success：文件上传成功后的回调  function(response, file, fileList)
            on-error： 文件上传失败时的回调 function(err, file, fileList)
            auto-upload：是否在选中文件后自动上传 默认值true
            disabled: 是否禁用上传组件
            before-upload: 即将上传之前的回调
     -->
    <div style="margin-top: 20px; margin-left: 20px">
      <el-col :span="3">
        <div>
          <el-upload
            class="upload-demo"
            :action="uploadPath"
            :disabled="disabled"
            :on-success="handleUploadSuccess"
            :on-error="handleUploadError"
            :show-file-list="false"
            :before-upload="handleBeforeUpload"
            name="excel"
            :limit="1"
          >
            <el-button icon="el-icon-download" size="small" type="primary">
              导入Excel
            </el-button>
          </el-upload>
        </div>
      </el-col>
      <el-col :span="3">
        <div>
          <el-button
            icon="el-icon-upload"
            size="small"
            type="primary"
            @click="handleExportDicts"
          >
            导出Excel
          </el-button>
        </div>
      </el-col>
    </div>

    <el-table
      :data="dicts"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" label="名称" width="180"></el-table-column>
      <el-table-column
        prop="dictCode"
        label="编码"
        width="180"
      ></el-table-column>
      <el-table-column prop="value" label="值"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
            编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import dictApi from '@/api/dict'
export default {
  data() {
    return {
      dicts: [],
      disabled: false,
      uploadPath: 'http://192.168.1.170/admin/core/dict/import',
    }
  },
  created() {
    //查询一级的数据字典
    this.getDicts(1)
  },
  methods: {
    handleEdit() {
      // 需要使用对话框
    },
    handleDelete(idx, row) {
      console.log(row)
      //如果数据字典没有下一级 才能删除
    },
    //表格的懒加载数据的函数
    load(row, treeNode, resolve) {
      //row代表点击行对应的数据字典json对象
      dictApi.getDicts(row.id).then((r) => {
        resolve(r.data.items)
      })
      //   console.log(row, treeNode)
    },
    //根据父id查询数据字典
    getDicts(pid) {
      dictApi.getDicts(pid).then((r) => {
        this.dicts = r.data.items
      })
    },
    //导出数据字典按钮单击事件函数
    handleExportDicts() {
      //修改浏览器地址栏地址,修改后浏览器会自动访问新地址
      window.location = 'http://192.168.1.170/admin/core/dict/export'
    },
    handleBeforeUpload(file) {
      //设置disabled为true防止重复提交
      this.disabled = true
    },
    handleUploadSuccess(response, file, fileList) {
      console.log(response)
      this.$message.success('导入成功')
      //取消禁用
      this.disabled = false
    },
    handleUploadError(err, file, fileList) {
      console.log(err)
      this.$message.error('导入失败')
    },
  },
}
</script>
